<template>
  <div class="register-page" v-if="types != ''">
    <Layouts :gutter="24" :span="[4, 20]" :color="['', '']">
      <!-- 左侧栏 -->
      <template #left>
        <div class="register-sidebar">
          <div class="sidebar-tabs">
            <span class="tab-btn active">挂号</span>
            <el-button
              type="primary"
              v-btnPermission="'btn-gh-add'"
              v-if="timeType != '2'"
              @click="onShowRegisterDialog(timeType)"
              >{{
                timeType == '1' ? '挂号' : timeType == '3' ? '预约' : ''
              }}</el-button
            >
          </div>
          <CustomCalendar v-model="calendarDate" />
          <div class="register-doctor-list" v-if="doctors.length > 0">
            <div class="register-doctor-group">
              全部医生
              <span
                class="wait-num"
                style="margin-left: 20px"
                v-if="timeType == '1'"
                >待诊 {{ zNum() }}</span
              >
              <span
                class="wait-num"
                style="margin-left: 20px"
                v-if="timeType == '2'"
                >已诊 {{ zNum() }}</span
              >
              <span
                class="wait-num"
                style="margin-left: 20px"
                v-if="timeType == '3'"
                >已约 {{ zNum() }}</span
              >
            </div>

            <!--   disabled: doctor.status === '暂停',
                  hoverable: doctor.status !== '暂停', -->
            <div
              v-for="(doctor, idx) in doctors"
              :key="doctor.doctorId"
              :class="[
                'register-doctor-item',
                {
                  active: idx === selectedDoctor,
                },
              ]"
              @click="selectDoctor(idx)"
            >
              <div class="doctor-main-info">
                <span class="doctor-name">{{ doctor.doctorName }}</span>
                <!-- <img src="@/assets/icon/icon_bukeguahao.svg" alt="" />
                <img src="@/assets/icon/icon_keguahao.svg" alt="" /> -->
              </div>
              <span class="wait-num" v-if="timeType == '1'"
                >待诊 {{ doctor.registerCount }}</span
              >
              <span class="wait-num" v-if="timeType == '2'"
                >已诊数量 {{ doctor.diagnosedCount }}</span
              >
              <span class="wait-num" v-if="timeType == '3'"
                >已约数量 {{ doctor.reservedCount }}</span
              >
              <el-button
                size="small"
                v-if="timeType == '1'"
                v-btnPermission="'btn-gh-add'"
                class="register-btn-mini"
                @click="handleRegister(doctor, 1)"
                >挂号</el-button
              >
              <el-button
                size="small"
                v-if="timeType == '3'"
                v-btnPermission="'btn-gh-add'"
                class="register-btn-mini"
                @click="handleRegister(doctor, 3)"
                >预约</el-button
              >
            </div>
          </div>
          <div class="register-doctor-list" v-else>
            <el-empty
              :image-size="100"
              :image="emptyImage"
              description="暂无数据"
            />
          </div>
        </div>
      </template>
      <template #right>
        <!-- 右侧内容 -->
        <div class="register-main">
          <div class="register-main-header">
            <div class="register-date-row">
              <div class="register-date-custom">
                <span class="calendar-arrow" @click="changeDate(-1)">
                  <img src="@/assets/icon/chevron-left.svg" alt="" />
                </span>
                <span
                  class="date-text"
                  @click="CustomDatePickerShow = !CustomDatePickerShow"
                  >{{ formatDate(mainDate) }}</span
                >
                <span class="calendar-arrow" @click="changeDate(1)">
                  <img src="@/assets/icon/chevron-right.svg" alt="" />
                </span>
                <button
                  class="register-today-btn"
                  @click="goToday"
                  v-if="timeType == '1'"
                >
                  今天
                </button>

                <!-- <div @click="guahaomoni">
                  模拟挂号成功！
                </div> -->

                <div
                  class="register-date-custom-picker"
                  v-if="CustomDatePickerShow"
                >
                  <CustomDatePicker
                    @change="CustomDatePickerChange"
                    :time="formatDate(mainDate)"
                  ></CustomDatePicker>
                </div>
              </div>
              <div class="register-header-right">
                <el-input
                  v-model="formData.patientName"
                  @change="handlePageChange(1)"
                  placeholder="搜索姓名/电话/身份证号/诊号"
                  class="register-search"
                />
              </div>
            </div>
            <div class="register-tabs-row">
              <div class="custom-tabs">
                <div
                  v-for="item in tabList"
                  :key="item.name"
                  :class="[
                    'custom-tab',
                    { active: formData.regStatus === item.name },
                  ]"
                  @click="
                    formData.regStatus = item.name;
                    handlePageChange(1);
                  "
                >
                  <span class="tab-label">{{ item.label }}</span>
                  <span class="tab-count">({{ item.count }})</span>
                </div>
              </div>
              <el-select
                v-model="formData.deptId"
                style="width: 240px"
                @change="handlePageChange(1)"
                placeholder="全部科室"
                filterable
                class="register-select"
              >
                <el-option
                  v-for="item in deptList"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
                ></el-option>
              </el-select>
              <div class="register-header-export">
                <el-button
                  class="register-export-btn"
                  v-btnPermission="'btn-gh-export'" @click="exportRegisterApi"
                  >导出</el-button
                >
              </div>
            </div>
          </div>
          <div style="height: calc(100vh - 260px)">
            <Table
              :columns="tableColumns"
              :data-source="tableData"
              class="register-table"
            />
          </div>

          <div class="page-pagination">
            <Pagination
              style="margin-left: auto"
              :key="pageSize + 'Pagination' + currentPage"
              :count="total"
              :page-size="pageSize"
              :pageNo="currentPage"
              @onPagechange="handlePageChange"
              @onSizechange="handleSizeChange"
            />
          </div>
        </div>
      </template>
    </Layouts>
    <!-- 挂号 -->
    <RegisterDialog
      :showRegisterDialog="showRegisterDialog"
      ref="registerDialogRef"
      @confirm="handleRegisterConfirm"
      @cancel="showRegisterDialog = false"
    />
    <!-- 取号成功弹框 -->
    <RegisterSuccessDialog
      :visible="showSuccessDialog"
      :dept="successDept"
      :doctor="successDoctor"
      :time="successTime"
      :fee="successFee"
      :payStatus="payStatus"
      @close="showSuccessDialog = false"
      @pay="handlePay"
    />
    <!-- 收费弹框 -->
    <ChargeDialog
      ref="chargeDialogRef"
      v-if="showChargeDialog"
      :visible="showChargeDialog"
      :amount="chargeAmount"
      :patientId="dispenseDetail?.patientId"
      :cashier="chargeCashier"
      :chargeTime="chargeTime"
      @close="showChargeDialog = false"
      @confirm="handleChargeConfirm"
    />
    <!-- 详情弹框 -->
    <RegisterDetailDialog
      :visible="showDetailDialog"
      :detailData="detailData"
      @close="handleDetailClose"
      @refund="handleRefund"
      @refundSuccess="handleRefund"
    />
    <addSuccessDialog
      :visible="showaddSuccessDialog"
      :info="addSuccsess"
      @close="showaddSuccessDialog = false"
      @pay="addhandlePay"
    ></addSuccessDialog>

    <BottomDrawer
      :visible="visible"
      :title="'打印'"
      :width="350"
      :top="'30vh'"
      :showFooter="false"
      @close="onCancel"
    >
      <div v-if="visible">
        <div style="display: none">
          <dom8 :info="printData" ref="dom8Ref" @onCancel="onCancel"></dom8>
        </div>
        <div class="printBtn" @click="printBox">挂号单</div>
      </div>
    </BottomDrawer>
  </div>
  <div v-else style="padding-top: 200px">
    <el-empty :image-size="260" :image="emptyImage" description="暂无权限" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { getRegisterPrint } from '@/api/print';
import emptyImage from '@/assets/icon/internet_empty_illustration.svg';
import dayjs from 'dayjs';
import CustomCalendar from '@/components/CustomCalendar.vue';
import type { TableColumn } from '@/types/table';
import RegisterDialog from './common/RegisterDialog.vue';
import RegisterSuccessDialog from './common/RegisterSuccessDialog.vue';
import addSuccessDialog from './common/addSuccessDialog.vue';
import ChargeDialog from './common/ChargeDialog.vue';
import RegisterDetailDialog from './common/RegisterDetailDialog.vue';
import stores from '@/store';
import {exportRegister} from '@/api/exportFile/index';
import type {
  DoctorResData,
  RegStatResponse,
  RegStatResponseData,
} from '@/types/registerList';
import { doCharge } from '@/api/fee/index';

import dom8 from './common/dom8.vue';

import {
  getRegisterList,
  getDoctorList,
  pickupRegister,
  getRegisterStat,
} from '@/api/registerList/index';
import type { RegisterInfo } from '@/types/registerList/index';


//导出


const exportRegisterApi = async () => {
  let res = await exportRegister(formData.value);
  if(res){
    const elink = document.createElement('a');
    elink.download = '挂号信息.xls';
    elink.style.display = 'none';
    const blob = new Blob([res], { type: 'application/x-msdownload' });
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
    ElMessage.success('导出成功');

  }else {
    //ElMessage.error('导出失败');
  }
}


const route = useRoute();
let menuList = ref<any>(
  await stores.useBaseDataStore().findMenuList(route.query.menuId)
);
//console.log(menuList.value, 'menuList.value');

menuList.value = menuList.value.filter((item: any) => {
  return item.menuType == 2;
});
const types = ref<any>();
//console.log(menuList.value);

if (menuList.value.length > 0) {
  types.value = menuList.value[0].perms;
} else {
  types.value = '';
}

// 收费弹框相关
const showChargeDialog = ref(false);
const chargeAmount = ref('');
const chargeCashier = ref('');
const chargeTime = ref('');
const handleChargeConfirm = async (form: any) => {
  // 完成收费逻辑
  let data = {
    ...form.data,
    itemIdList: [],
    orderId: dispenseDetail.value?.orderId,
  };
  let res = await doCharge(data);
  if (res.code == '200') {
    ElMessage.success('收费成功');
    showChargeDialog.value = false;
    chargeAmount.value = '';
    getRegisterListApi();
    getRegisterStatApi();
    if (form.printRegister == true) {
      // 挂号单打印
      let ress = await getRegisterPrint(dispenseDetail.value.registerId);
      if (ress.code != '200') {
       
        return;
      }
      printData.value = ress.data;
      visible.value = true;
    }
  } else {
    //ElMessage.error(res.msg);
  }
};

//模拟挂号
const addSuccsess = ref<any>();
const dom8Ref = ref();
//挂号打印
const visible = ref(false);
const printData = ref<any>();
const printBox = () => {
  dom8Ref.value?.open();

  setTimeout(() => {
    visible.value = false;
  }, 3000);
};
const onCancel = () => {
  visible.value = false;
};

const guahaomoni = async () => {
  // let data = {
  //   orderId:  addSuccsess.value.orderId,
  //   payStatus:addSuccsess.value.payStatus,
  //   registerId: addSuccsess.value.registerId,
  //   regFee:addSuccsess.value.regFee,
  //   deptName:addSuccsess.value.deptName,
  //   doctorName:addSuccsess.value.doctorName,
  //   regMethod:addSuccsess.value.regMethod,
  //   time:dayjs(new Date()).format('YYYY-MM-DD HH:mm')
  // }
  showaddSuccessDialog.value = true;
};

const calendarDate = ref(new Date());
const showRegisterDialog = ref(false);
const mainDate = ref(new Date());
const showSuccessDialog = ref(false);
const showaddSuccessDialog = ref(false);

const successDept = ref('');
const successDoctor = ref('');
const successTime = ref('');
const successFee = ref('');
const payStatus = ref('');
const useBaseData = stores.useBaseDataStore();
const registerDialogRef = ref<InstanceType<typeof RegisterDialog> | null>(null);
const dispenseDetail = ref<any>({});
const CustomDatePickerShow = ref(false);

const deptList = ref(useBaseData.deptSelectList);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const timeType = ref<any>('');

const handleRegister = async (row: any, index: number) => {
  showRegisterDialog.value = true;
  let rowData = {
    ...row,
    timeType: timeType.value,
    visitDate: dayjs(mainDate.value).format('YYYY-MM-DD'),
  };
  registerDialogRef.value?.open(rowData, index);
};

const formatDate = (date: Date) => {
  return dayjs(date).format('YYYY-MM-DD');
};
const changeDate = (delta: number) => {
  CustomDatePickerShow.value = false;
  const d = dayjs(mainDate.value).add(delta, 'day');
  mainDate.value = d.toDate();
  calendarDate.value = new Date(mainDate.value);
};
const CustomDatePickerChange = (date: Date) => {
  if (date == null) {
    CustomDatePickerShow.value = false;
    return;
  }
  CustomDatePickerShow.value = false;
  mainDate.value = date;
  calendarDate.value = new Date(date);
  handlePageChange(1);
};

const goToday = () => {
  CustomDatePickerShow.value = false;
  mainDate.value = dayjs().startOf('day').toDate();
  calendarDate.value = new Date();
};
const tab = ref('');

const tableData = ref<RegisterInfo[]>([]);
const formData = ref<{
  patientName: string;
  deptId: string;
  doctorId: any;
  visitDate: string;
  regStatus: string;
  pageNo: number;
  pageSize: number;
}>({
  patientName: '',
  deptId: '',
  visitDate: '',
  regStatus: '',
  pageNo: 1,
  pageSize: 10,
  doctorId: '',
});

const tabList = ref<any[]>([
  {
    name: '',
    label: '全部',
    count: 0,
  },
]);

const regStatusEnum = useBaseData.getEnumSelect('regStatusEnum');
regStatusEnum.forEach((item: any) => {
  tabList.value.push({
    name: item.value,
    label: item.text,
    count: 0,
  });
});

// { id: 1, name: '选中效果', icon: '🦷', wait: 12, status: '挂号' },
// { id: 2, name: '李四', icon: '🌞', wait: 0, status: '挂号' },
// { id: 3, name: '李四', icon: '', wait: 0, status: '暂停' },
// { id: 4, name: '悬停效果', icon: '', wait: 0, status: '挂号' },
// { id: 5, name: '李四', icon: '', wait: 0, status: '挂号' },
const doctors = ref<DoctorResData[]>([]);

//
const selectedDoctor = ref(null);
const tableColumns: TableColumn[] = [
  {
    prop: 'visitNo',
    label: '诊号',
    type: 'text',
    width: 200,
    textColor: 'color:#18B3AB',
    componentProps: {
      fixed: 'left',
    },
    buttonGroup: [
      {
        label: 'visitNo',
        type: 'text',
        click: (row: any) => {
          handleShowDetail(row);
        },
      },
    ],
  },
  { prop: 'xlh', label: '序列号', width: 130 },
  { prop: 'patientName', label: '患者' },
  { prop: 'patientGenderText', label: '性别' },
  { prop: 'age', label: '年龄' },
  { prop: 'patientPhone', label: '手机号', width: 130 },
  { prop: 'visitTypeText', label: '初/复诊', width: 130 },
  { prop: 'regTypeText', label: '挂号类型', width: 130 },
  { prop: 'deptName', label: '科室', width: 130 },
  { prop: 'doctorName', label: '医生', width: 130 },
  // { prop: 'regStatus', label: '挂号状态', width: 120 },
  { prop: 'regStatusText', label: '就诊状态', width: 130, type: 'tag' },
  { prop: 'payStatusText', label: '收费状态', width: 130, type: 'textColor' },
  { prop: 'regMethodText', label: '挂号方式', width: 130 },
  { prop: 'regChannelText', label: '挂号渠道', width: 130 },
  {
    prop: 'action',
    label: '操作',
    type: 'action',
    width: 150,
    componentProps: {
      fixed: 'right',
    },
    buttonGroup: [
      {
        label: '详情',
        type: 'text',
        click: (row: any) => {
          handleShowDetail(row);
        },
      },
      {
        label: '取号',
        statusName: ['regStatus'],
        permissions: 'btn-gh-pickup',
        status: '1',
        type: 'text',
        click: async (row: any) => {
          // 模拟取号成功弹框

          // dispenseDetail.value = row;
          // successDept.value = row.deptName;
          // successDoctor.value = row.doctorName;
          // successTime.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm');
          // successFee.value = row.regFee;
          // showSuccessDialog.value = true;

          let res = await pickupRegister(row.registerId);
          if (res.code == '200') {
            dispenseDetail.value = row;
            successDept.value = row.deptName;
            successDoctor.value = row.doctorName;
            successTime.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm');
            successFee.value = row.regFee;
            payStatus.value = res.data?.payStatus;
            showSuccessDialog.value = true;
            getRegisterListApi();
            getRegisterStatApi();
          } else {
            //ElMessage.error(res.msg);
          }
        },
      },
      {
        label: '打印',
        type: 'text',
        statusName: ['payStatus'],
        permissions: 'btn-gh-log',
        status: '2,3,4',
        click: async (row: any) => {
          //console.log(row.registerId);

          let res = await getRegisterPrint(row.registerId);
          if (res.code != '200') {

            return;
          }
          printData.value = res.data;
          visible.value = true;
        },
      },
      {
        label: '收费',
        statusName: ['payStatus'],
        permissions: 'btn-gh-money',
        status: '1',
        type: 'text',
        click: (row: any) => {
          // 打开收费弹框，金额可根据 row 取
          chargeAmount.value = row.regFee;
          chargeCashier.value = getUserInfo().empName;
          chargeTime.value = dayjs().format('YYYY-MM-DD HH:mm');
          dispenseDetail.value = row;
          showChargeDialog.value = true;
        },
      },
    ],
  },
];

//监听日历变化
watch(
  () => calendarDate.value,
  async () => {
    mainDate.value = calendarDate.value;
    CustomDatePickerShow.value = false;
    getRegisterStatApi();

    getDoctorListApi();
  }
);

//获取医生当日挂号统计
const getDoctorListApi = async () => {
  // 当选中今天时，显示当前医生待诊数量和挂号按钮。当选中未来日期时，显示为已约数量和预约按钮。当选中过去日期时，则显示已诊数量。
  let time = dayjs(mainDate.value).format('YYYY-MM-DD');
  // let time ='2025-07-31'

  //今天 1 今天之前2 今天之后3
  timeType.value = compareDate(time);
  const res = await getDoctorList(time);
  if (res.code != '200') {

    return;
  }
  doctors.value = res.data;

  getRegisterListApi();
};
const zNum = () => {
  let num = 0;
  if (timeType.value == '1') {
    for (let index = 0; index < doctors.value.length; index++) {
      let item = doctors.value[index];
      if (item) {
        num += item.registerCount;
      }
    }
  }
  if (timeType.value == '2') {
    for (let index = 0; index < doctors.value.length; index++) {
      let item = doctors.value[index];
      if (item) {
        num += item.diagnosedCount;
      }
    }
  }
  if (timeType.value == '3') {
    for (let index = 0; index < doctors.value.length; index++) {
      let item = doctors.value[index];
      if (item) {
        num += item.reservedCount;
      }
    }
  }
  return num;
};
const compareDate = (time: string) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  const input = new Date(time);
  input.setHours(0, 0, 0, 0);

  if (input.getTime() === today.getTime()) {
    return 1;
  } else if (input < today) {
    return 2;
  } else {
    return 3;
  }
};

//切换医生
const selectDoctor = (idx: any) => {
  selectedDoctor.value = idx;
  getRegisterListApi();
};

const regStaList = ref<any>();
const getRegisterStatApi = async () => {
  let data = {
    patientName: '',
    deptId: '',
    visitDate: dayjs(mainDate.value).format('YYYY-MM-DD'),
    doctorId:
      selectedDoctor.value != null
        ? doctors.value[selectedDoctor.value]?.doctorId
        : '',
  };
  for (let index = 0; index < tabList.value.length; index++) {
    let item = tabList.value[index];
    item.count = 0;
  }
  const res = await getRegisterStat(
    data.patientName,
    data.deptId,
    data.doctorId,
    data.visitDate
  );
  //console.log(regStatusEnum);
  if (res.code != '200') {
    return;
  }
  for (let index = 0; index < tabList.value.length; index++) {
    let item = tabList.value[index];
    if (item.name == '1') {
      //待取
      item.count = res.data?.reservedCount || 0;
    } else if (item.name == '2') {
      //待签
      item.count = 0;
    } else if (item.name == '3') {
      //待诊
      item.count = res.data?.registerCount || 0;
    } else if (item.name == '5') {
      //已诊
      item.count = res.data?.diagnosedCount || 0;
    } else if (item.name == '6') {
      //已退
      item.count = res.data?.refundedCount || 0;
    } else if (item.name == '7') {
      //过期
      item.count = res.data?.expiredCount || 0;
    }
    tabList.value[0].count += item.count;
  }
};

//列表
const getRegisterListApi = async () => {
  tableData.value = [];

  formData.value.visitDate = dayjs(mainDate.value).format('YYYY-MM-DD');
  formData.value.doctorId =
    selectedDoctor.value != null
      ? doctors.value[selectedDoctor.value]?.doctorId
      : '';
  formData.value.pageNo = currentPage.value;
  formData.value.pageSize = pageSize.value;
  const res = await getRegisterList(formData.value);
  if (res.code != '200') {

    return;
  }
  res.data.list = res.data.list || [];
  res.data.list.forEach((item: any) => {
    if (item.patientGender == '1') {
      item.patientGenderText = '男';
    } else if (item.patientGender == '2') {
      item.patientGenderText = '女';
    } else {
      item.patientGenderText = '未知';
    }
    item.age = item.ageYear
      ? item.ageYear + '岁'
      : '' + (item.ageMonth ? '-' + item.ageMonth + '月' : '');

    if (item.visitType == '1') {
      item.visitTypeText = '初诊';
    } else {
      item.visitTypeText = '复诊';
    }

    if (item.regType == '1') {
      item.regTypeText = '普通号';
    } else {
      item.regTypeText = '急诊';
    }
    if (item.regMethod == '1') {
      item.regMethodText = '挂号';
    } else {
      item.regMethodText = '预约';
    }

    let regStatusEnum = useBaseData.getEnumSelect('regStatusEnum');

    for (let index = 0; index < regStatusEnum.length; index++) {
      if (item.regStatus == regStatusEnum[index].value) {
        item.regStatusText = regStatusEnum[index].text;
      }
    }

    let payStatusEnum = useBaseData.getEnumSelect('payStatusEnum');
    for (let index = 0; index < payStatusEnum.length; index++) {
      if (item.payStatus == payStatusEnum[index].value) {
        item.payStatusText = payStatusEnum[index].text;
      }
    }
    let regChannelEnum = useBaseData.getEnumSelect('regChannelEnum');
    for (let index = 0; index < regChannelEnum.length; index++) {
      if (item.regChannel == regChannelEnum[index].value) {
        item.regChannelText = regChannelEnum[index].text;
      }
    }

    let visitPeriodEnum = useBaseData.getEnumSelect('visitPeriodEnum');
    for (let index = 0; index < visitPeriodEnum.length; index++) {
      if (item.visitPeriod == visitPeriodEnum[index].value) {
        item.visitPeriodText = visitPeriodEnum[index].text;
        item.xlh = item.visitPeriodText + ' · ' + item.visitSeqNo;
      }
    }

    if (item.regStatus != '1' && item.payStatus == '1') {
      item.payregStatus = '1'; // 可收费
    }
  });

  tableData.value = res.data.list;
  total.value = res.data.totalCount;
};

const onShowRegisterDialog = (timeType: any) => {

  //console.log(timeType);
  
  if (selectedDoctor.value == null) {
    showRegisterDialog.value = true;
    let rowData = {
      visitDate: dayjs(mainDate.value).format('YYYY-MM-DD'),
      timeType: timeType,
      doctorName: '',
    };
    registerDialogRef.value?.open(rowData, 1);
    return;
  }

  showRegisterDialog.value = true;
  let rowData = {
    ...doctors.value[selectedDoctor.value],
    visitDate: dayjs(mainDate.value).format('YYYY-MM-DD'),
    timeType: timeType,
    doctorName: '',
  };
  registerDialogRef.value?.open(rowData, 1);
};
const handleRegisterConfirm = async (row: any) => {
  showRegisterDialog.value = false;
  if (row.payStatus == '1') {
    dispenseDetail.value = row;
    successDept.value = row.deptName;
    successDoctor.value = row.doctorName;
    successTime.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm');
    successFee.value = row.regFee;
    showaddSuccessDialog.value = true;
    addSuccsess.value = row;

  }

  getDoctorListApi();
  getRegisterStatApi();
};

// 收费
const handlePay = () => {
  showSuccessDialog.value = false;
  chargeAmount.value = dispenseDetail.value.regFee;
  chargeCashier.value = getUserInfo().empName;
  chargeTime.value = dayjs().format('YYYY-MM-DD HH:mm');
  showChargeDialog.value = true;
};

const addhandlePay = () => {
  showaddSuccessDialog.value = false;
  chargeAmount.value = addSuccsess.value.regFee;
  chargeCashier.value = getUserInfo().empName;
  chargeTime.value = dayjs().format('YYYY-MM-DD HH:mm');
  dispenseDetail.value = addSuccsess.value;
  showChargeDialog.value = true;
};
// 详情弹框相关
const showDetailDialog = ref(false);
const detailData = ref({
  name: '',
  sex: '',
  age: '',
  phone: '',
  id: '',
  doctor: '',
  time: '',
  status: '',
  charge: '',
  feeStatus: '',
  channel: '',
  remark: '',
});

const handleShowDetail = (row: any) => {
  detailData.value = { ...row };
  showDetailDialog.value = true;
};
const handleDetailClose = () => {
  showDetailDialog.value = false;
};
const handleRefund = () => {
  // 退号逻辑
  showDetailDialog.value = false;
  getRegisterListApi();
  getRegisterStatApi();
};
const handlePageChange = (page: number) => {
  //console.log('page');
  currentPage.value = page;
  getRegisterListApi();
};
const handleSizeChange = (size: number) => {
  //console.log('size');
  currentPage.value = 1;
  pageSize.value = size;
  getRegisterListApi();
};

onMounted(() => {
  getDoctorListApi();
  getRegisterStatApi();
});
</script>

<style scoped lang="scss">
.register-page {
  .printBtn {
    width: 296px;
    cursor: pointer;
    line-height: 46px;
    background: rgba(220, 220, 220, 0.1);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #ebebeb;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    color: #16ada4;
  }
  .printBtn:hover {
    border: 1px solid rgba(22, 173, 164, 0.48);
    background: rgba(22, 173, 164, 0.08);
  }
  .custom-calendar {
    margin: 8px 16px 0 16px;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    padding-bottom: 8px;
    user-select: none;
  }
  .calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    color: #222;
    padding: 12px 0 8px 0;
  }
  .calendar-title {
    margin: 0 24px;
    font-size: 24px;
    font-weight: 600;
    color: #222;
  }
  .calendar-arrow {
    font-size: 18px;
    color: #16ada4;
    cursor: pointer;
    padding: 0 8px;
    border-radius: 4px;
    transition: background 0.2s;
  }
  .calendar-arrow:hover {
    background: #e6f7f5;
  }
  .calendar-table {
    width: 100%;
    margin: 0 auto;
  }
  .calendar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .calendar-week {
    color: #bdbdbd;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 2px;
  }
  .calendar-week-cell {
    flex: 1;
    text-align: center;
    padding: 6px 0;
  }
  .calendar-cell {
    flex: 1;
    text-align: center;
    font-size: 18px;
    color: #222;
    height: 36px;
    line-height: 36px;
    border-radius: 6px;
    margin: 2px 0;
    background: none;
    transition: background 0.2s, color 0.2s;
  }
  .calendar-cell-other {
    color: #d3d3d3;
  }
  .calendar-cell-today {
    background: #e6f7f5;
    color: #16ada4;
    font-weight: 600;
  }
  .calendar-cell-selected {
    border: 1.5px solid #16ada4;
  }
  display: flex;
  height: 100%;
  background: #f7f8fa;
}
.register-sidebar {
  width: 280px;
  background: #fff;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 2px 8px 0 #e9e9e9;
  padding: 0 0 16px 0;
  display: flex;
  height: 100%;
  flex-direction: column;
}
.register-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0 16px;
  border-bottom: 1px solid #dcdcdc;
}
.register-title {
  font-size: 20px;
  font-weight: 700;
  color: #16ada4;
}
.register-btn {
  height: 32px;
  font-size: 15px;
}
.register-calendar {
  margin: 8px 16px 0 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}
.register-doctor-list {
  margin: 16px 0 0 0;
  flex: 1;
  overflow-y: auto;
}
.register-doctor-group {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.9);
  padding: 0 16px 8px 16px;
}
// 医生列表样式
// 医生列表样式优化
.register-doctor-item {
  display: flex;
  align-items: center;
  padding: 0 18px;
  height: 56px;
  border-radius: 12px;
  margin: 8px 8px 0 8px;
  cursor: pointer;
  font-size: 17px;
  color: #222;
  background: #fff;
  font-weight: 500;
  position: relative;
  transition: background 0.2s, color 0.2s, border 0.2s;
  border: 1.5px solid transparent;
  box-sizing: border-box;
}
.register-doctor-item.active {
  background: rgba(24, 179, 171, 0.1);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #16ada4;
  color: #222;
}
.register-doctor-item.disabled {
  color: #bbb;
  background: #fafafa;
  cursor: not-allowed;
  opacity: 1;
  border: none;
}
.register-doctor-item:not(.active):not(.disabled):hover {
  background: #f8f8f8;
}
.doctor-main-info {
  display: flex;
  align-items: center;
  flex: 1;
  font-weight: 600;
  font-size: 17px;
  color: inherit;
}
.doctor-name {
  font-weight: 600;
  font-size: 14px;
  color: inherit;
  margin-right: 6px;
}
.doctor-icon {
  margin: 0 8px 0 0;
  font-size: 18px;
}
.wait-num {
  color: #bdbdbd;
  font-size: 13px;
  margin: 0 28px 0 0;
  font-weight: 400;
}
.register-btn-mini {
  width: 40px;
  height: 24px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px 3px 3px 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 13px;
  padding: 7px;
  font-weight: 500;
  margin-left: auto;
}
.doctor-checked {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
.register-main {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 0 16px 16px 16px;
  display: flex;
  .page-pagination {
    margin-top: 20px;
  }
  flex-direction: column;
}
.register-main-header {
  margin-bottom: 12px;
}
.register-date-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0px;
  position: relative;
}

.register-date-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  height: 36px;
  .register-date-custom-picker {
    position: absolute;
    top: 46px;
    z-index: 10;
  }
}
.date-arrow {
  border: 1px solid #e0e0e0;
  background: #fff;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}
.date-arrow:hover {
  background: #f5f5f5;
}
.date-text {
  font-size: 20px;
  font-weight: 500;
  color: #222;
  min-width: 120px;
  text-align: center;
  letter-spacing: 1px;
}
.register-today-btn {
  height: 32px;
  font-size: 15px;
  padding: 0 16px;
  margin-left: 8px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  border-radius: 4px;
  color: #222;
  cursor: pointer;
  transition: background 0.2s;
}
.register-today-btn:hover {
  background: #e6f7f5;
  color: #16ada4;
  border-color: #16ada4;
}

.register-today-btn {
  height: 32px;
  font-size: 15px;
  padding: 0 16px;
  margin-left: 8px;
}
.register-tabs-row {
  display: flex;
  align-items: center;
  width: 100%;
}

// tabs样式优化
.custom-tabs {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0;
  border-radius: 6px;
  border: none;
}
.custom-tab {
  display: flex;
  align-items: center;
  height: 32px;
  min-width: 96px;
  padding: 0 24px;
  font-size: 14px;
  color: #bdbdbd;
  background: #fff;
  border-top: 1.5px solid #e0e0e0;
  border-bottom: 1.5px solid #e0e0e0;
  border-left: none;
  border-right: none;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  position: relative;
  font-weight: 400;
}
.custom-tab:not(:first-child) {
  // box-shadow: -1.5px 0 0 0 #e0e0e0;
}
.custom-tab:first-child {
  border-left: 1.5px solid #e0e0e0;
  border-radius: 6px 0 0 6px;
}
.custom-tab:last-child {
  border-right: 1.5px solid #e0e0e0;
  border-radius: 0 6px 6px 0;
}
.custom-tab.active {
  color: #18b3ab;
  background: #fff;
  font-weight: 500;
  border: 2px solid #18b3ab;
  z-index: 2;
  position: relative;
}
.custom-tab:not(.active) {
  background: #fff;
  color: #bdbdbd;
  border: 1px solid #e0e0e0;
}
.tab-label {
}
.tab-count {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  margin-left: 2px;
  color: #18b3ab;
  border-radius: 14px;
  transition: background 0.2s, color 0.2s;
}
.custom-tab:not(.active) .tab-count {
  color: #bdbdbd;
}
.custom-tab:hover:not(.active) {
  color: #18b3ab;
  background: #f7f8fa;
  .tab-count {
    color: #18b3ab;
  }
}

.register-tabs {
  flex: none;
  min-width: 0;
}
.register-select {
  width: 140px;
  margin-left: 12px;
}
.register-header-right {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  height: 44px;
  gap: 8px;
}
.register-header-export {
  margin-left: auto;
}
.register-search {
  width: 280px;
}
.register-export-btn {
  margin-left: 0;
  color: #18b3ab;
}
.register-table {
  flex: 1;
  width: 100%;
  margin-top: 8px;
}
.sidebar-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 22px;
  border: 1px solid #e7e7e7;
  .tab-btn {
    cursor: pointer;
    font-weight: 400;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.4);
    line-height: 52px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    position: relative;
    &.active {
      font-weight: 400;
            font-size: 18px;

      color: #18b3ab;
      text-align: left;
      font-style: normal;
      text-transform: none;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: #18b3ab;
      }
    }
  }
}
.calendar-arrow {
  font-size: 18px;
  color: #16ada4;
  cursor: pointer;
  padding: 0 8px;
  border-radius: 4px;
  transition: background 0.2s;
}
</style>
